<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4729176_sdqzv2ofd8.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/public.css">

    <title>Document</title>
    <style>
        .carousel-inner img {
            width: 100%; /* 确保图片宽度为100% */
            height: 211px;
        }
        .nav{
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-around;
    align-items: center;
}
.list{
    padding-bottom: 65px;
    background: #fff;
}
.list .film {
    display: flex;
    margin-left: 10px;
    justify-content: space-between;
    padding-top: 10px;
}
.list .film .left{
    display: flex;
    
}
.list .film img{
    width: 66px;
    height: 100px;
}
.list .film .wenzi{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    
}
 .type{
    font-size: 12px;
    color: #fff;
    background-color: #d2d6dc;
    margin-left: 5px;
}
.buttobox{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.buttobox .butt{
    height: 25px;
    line-height: 25px;
    width: 60px;
    color: #f03d37;
    font-size: 13px;
    border: 1px solid #f03d37;
    background-color: #fff;
}
    </style>
</head>
<body>
    <div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.maizuo.com/v5/upload/67f9eb733fd33f6148ae740e130d5612.jpg?x-oss-process=image/quality,Q_70" class="d-block" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.DwMQvX8C7421rpb1ybVE4QHaEK?w=298&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7" class="d-block" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.-E6aFsRT-wkvdbauz7f-tQHaEK?r=0&rs=1&pid=ImgDetMain" class="d-block" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!-- <div class="nav f14 bg-fff">
        <p>热映</p>
        <p>待映</p>
        <p>经典电影</p>
    </div> -->
    <div class="list" id="list">
        <!-- <div class="film">
            <div class="left">
                <img src="https://pic.maizuo.com/usr/movie/6d31257bd0c897f0a953b7097853d627.jpg" alt="">
                <div class="wenzi lh15">
                    <div class="f16">我和我的父辈<span class="type">2D</span></div> 
                    <div class="f14 grey">观众评分<span class="yellow">7</span></div>
                    <div class="f14 grey">主演: 吴京|章子怡|徐峥|沈腾</div>
                    <div class="f14 grey">中国大陆| 100分钟</div>
                </div>
            </div>
            <div class="buttobox">
                <button class="butt">购票</button>
            </div>
        </div>  -->
        
    </div>
    
    <!-- 底部 -->
    <footer>
        <a class="item" href="index.html">
            <i class="iconfont icon-dianying"></i>
            <span>电影</span>
        </a>
        <a class="item" href="cinema.html">
            <i class="iconfont icon-yingyuan"></i>
            <span>影院</span>
        </a>
        <a class="item" href="video.html">
            <i class="iconfont icon-shipin"></i>
            <span>视频</span>
        </a>
        <a class="item" href="my.html">
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </a>
    </footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script>
    document.addEventListener('DOMContentLoaded', function() {
        var Obj = {
            getTypeList: function() {
                // 分类列表
                var url = 'http://43.136.85.99:3008/film/list?type=1';
                axios.get(url).then(function(res) {
                    if (res.data.code === 666 && res.data.msg === "success") {
                        // 拿到数据后,调用方法进行展示
                        Obj.rendTypeList(res.data.data);
                    } else {
                        console.error('Failed to fetch movie data:', res.data.msg);
                    }
                }).catch(function(error) {
                    console.error('There has been a problem with your axios operation:', error);
                    alert('分类请求失败');
                });
            },
            
            // 渲染分类列表
            rendTypeList: function(list) {
                var htmlStr = '';
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                     let gradeText = item.grade ? item.grade : '暂无评分';
                    htmlStr += `
                        <div class="film">
                            <div class="left">
                                <img src="${item.poster}" alt="${item.name}">
                                <div class="wenzi lh15">
                                    <div class="f16">${item.name}<span class="type">${item.filmType.dx}</span></div> 
                                    <div class="f14 grey">观众评分<span class="yellow">${gradeText}</span></div>
                                    <div class="f14 grey">主演: ${item.director}</div>
                                    <div class="f14 grey">${item.nation} | ${item.runtime}分钟</div>
                                </div>
                            </div>
                            <div class="buttobox">
                                <button class="butt">购票</button>
                            </div>
                        </div>
                    `;
                }
                document.querySelector('#list').innerHTML = htmlStr;
            }
        };
    
        Obj.getTypeList();
    });
// 设置底部导航栏的 active 状态
document.querySelectorAll('footer .item').forEach(item => {
        item.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认跳转
            document.querySelectorAll('footer .item').forEach(el => {
                el.classList.remove('active');
            });
            this.classList.add('active');

            // 动态跳转到目标页面
            const href = this.getAttribute('href');
            window.location.href = href;
        });
    });

    // 页面加载时设置底部导航栏的 active 状态
    document.addEventListener('DOMContentLoaded', () => {
        const currentPage = window.location.pathname.split('/').pop();
        document.querySelectorAll('footer .item').forEach(item => {
            const href = item.getAttribute('href');
            if (href === currentPage) {
                item.classList.add('active');
            }
        });
    });
    </script>
</body>
</html>